<template>
  <div class="page-wrapper">
    <div class="tree-list">
      <FolderTree v-model="folderId" />
    </div>
    <a-card
      title="网络硬盘"
      class="general-card list-table"
      :body-style="{height: 'calc(100% - 72px)'}"
    >
      <template #title>
        <a-space :size="16">
          <span>{{folderId}}</span>
          <a-select v-model="fileType" :options="FileTypeOptions" style="width: 160px;" placeholder="所有文件" allow-clear />
          <Upload />
        </a-space>
      </template>
      <template #extra>
        <a-space :size="16">
          <a-input v-model="fileName" placeholder="文件名" allow-clear />

          <a-dropdown>
            <a-button>
              <icon-list />
            </a-button>
            <template #content>
              <a-doption>列表模式</a-doption>
              <a-doption>缩略模式</a-doption>
              <a-doption>大图模式</a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>
      <div class="card-body">
        <!-- 文件列表 -->
        <div class="table-wrapper">
          <div class="table-box">
            <a-table
              bordered
              row-key="id"
              :columns="columns"
              :data="tableData"
              :scroll="{ y: '100%'}"
              :loading="loading"
              :pagination="false"
            >
              <template #fileName="{ record }">
                <a-space :size="12">
                  <FileIcon :data-source="record" />

                  <span>{{ record.file_name }}</span>
                </a-space>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useLoading from "@/hooks/loading.ts";
import { getFolderTree, getFileList } from "@/api/content/drive.ts";
import get from "lodash/get";
import FolderTree from "@/views/drive/folder-tree.vue";
import FileIcon from "@/views/drive/components/file-icon.vue";
import Upload from '@/components/upload/index.vue'

// 10 图片 20 视频 30 音频 40 文档 50 压缩包 0 其他
const folderId = ref(""); // 文件目录
const fileName = ref(""); // 文件名称
const fileType = ref(""); // 文件类型
const FileTypeOptions = [
  {
    value: "10",
    label: "图片"
  },
  {
    value: "30",
    label: "音频"
  },
  {
    value: "20",
    label: "视频"
  },
  {
    value: "40",
    label: "文档"
  },
  {
    value: "50",
    label: "附件"
  },
  {
    value: "0",
    label: "其他"
  }
];


const { loading, setLoading } = useLoading(true);
const driveOptions = ref([]); // 文件夹树

async function fetchFolderTree() {
  setLoading(true);
  try {
    const { data } = await getFolderTree();
    driveOptions.value = [{ name: "根目录", id: 0 }].concat(get(data, "list", []) || []);
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
}

fetchFolderTree();

// 文件列表
const tableData = ref([]);
const columns = [
  {
    title: "文件名",
    dataIndex: "file_name",
    slotName: "fileName"
  },
  {
    title: "类型",
    dataIndex: "file_ext"
  },
  {
    title: "修改时间",
    dataIndex: "update_time"
  },
  {
    title: "大小",
    dataIndex: "file_size"
  }
];

async function fetchTableData() {
  setLoading(true);
  try {
    const params = {
      file_type: fileType.value,
      file_name: fileName.value
    };

    const { data } = await getFileList(params);
    tableData.value = get(data, "list", []);
    // pageValue.total = data.total;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
}

fetchTableData();
</script>

<style scoped lang="less">
.page-wrapper {
  position: relative;
  height: 100%;
  padding: 16px 16px 0 276px;

  .tree-list {
    position: absolute;
    top: 16px;
    bottom: 0;
    left: 16px;
    width: 240px;
    overflow: hidden;
    background-color: #fafbfc;
    border-radius: 4px;
  }

  .list-table {
    height: 100%;

    .table-title {
      display: flex;
      font-size: 16px;
      line-height: 32px;

      .desc {
        margin-left: 12px;
        color: #6b778c;
      }
    }

    .card-body {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      height: 100%;
      min-height: 0;
      overflow: hidden;

      .table-wrapper {
        position: relative;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        //height: 600px;
        .table-box {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          overflow: hidden;
        }
      }
    }
  }
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
